<template>
  <div class="container">
    <mpvue-cropper
      ref="cropper"
      :option="cropperOpt"
      @ready="cropperReady"
      @beforeDraw="cropperBeforeDraw"
      @beforeImageLoad="cropperBeforeImageLoad"
      @beforeLoad="cropperLoad"
    ></mpvue-cropper>
    <div class="cropper-buttons">
      <div class="upload" @tap="uploadTap">选择图片</div>
      <div class="getCropperImage" @tap="getCropperImage">上传图片</div>
    </div>
  </div>
</template>

<script>
import MpvueCropper from 'mpvue-cropper'
import wx from 'wx'
import api from '@/utils/api'
import Toast from '@/utils/toast'
import { setTimeout } from 'timers';
let wecropper
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

export default {
  data () {
    return {
      cropperOpt: {
        id: 'cropper',
        width,
        height,
        scale: 2.5,
        zoom: 8,
        cut: {
          x: (width - 300) / 2,
          y: (height - 300) / 2,
          width: 300,
          height: 300
        },
        picUrl: '',
        isUpdate: false
      }
    }
  },
  components: {
    MpvueCropper
  },
  methods: {
    cropperReady (...args) {
      console.log('cropper ready!')
    },
    cropperBeforeImageLoad (...args) {
      console.log('before image load')
    },
    cropperLoad (...args) {
      console.log('image loaded')
    },
    cropperBeforeDraw (...args) {
      // Todo: 绘制水印等等
    },
    uploadTap () {
      let that = this
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          console.log(res)
          const src = res.tempFilePaths[0]
          that.isUpdate = true
          //  获取裁剪图片资源后，给data添加src属性及其值
          wecropper.pushOrigin(src)
        }
      })
    },
    async getCropperImage () {
      let that = this
      if (that.isUpdate) {
        let token = await api.getqiuniutoken({});
        wecropper.getCropperImage()
          .then((src) => {
            let key = Math.random().toString(36).substr(2); // 生成一个随机字符串的文件名
            let houzhui = src.substring(src.length, src.length - 4);
            let keyName = new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getDate() + '/' + key + houzhui;
            wx.uploadFile({
              url: 'https://upload.qiniup.com',
              filePath: src,
              name: 'file',
              formData: {
                'token': token.uptoken,
                'key': keyName
              },
              success: function (r) {
                console.log(r)
                var data = r.data;
                if (typeof data === 'string') data = JSON.parse(data.trim());
                console.log(data)
                if (data.key) {
                  that.picUrl = `http://mytimg.178mr.com/${data.key}`
                  that.updateUserhead(that.picUrl)
                }
              },
              fail: function (res) {
                console.log(res)
              }
            })
          })
          .catch(e => {
            console.error('获取图片失败')
          })
      } else {
        Toast('请选择图片', 'noicon')
        return false;
      }
    },
    async updateUserhead (picUrl) {
      let userId = wx.getStorageSync('userInfo').user_id;
      let headid = wx.getStorageSync('headid');
      let res = await api.postuserhead({ user_id: userId, headid: headid, headurl: picUrl });
      console.log(res)
      if (res.code === '100') {
        Toast('头像更新成功', 'success');
        setTimeout(() => {
          wx.switchTab({
            url: '/pages/basic/mine/mine'
          })
        }, 1000)
      }
    }
  },

  mounted () {
    wecropper = this.$refs.cropper
  }
}
</script>

<style>
.container {
  height: 100%;
}
.cropper-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #e5e5e5;
}

.cropper-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
  width: 50%;
  text-align: center;
}

.cropper {
  position: absolute;
  top: 0;
  left: 0;
}

.cropper-buttons {
  background-color: #fff;
  color: #ff4444;
}
</style>